import Taro from '@tarojs/taro'
import React, {useState} from 'react'
import {View, Text, Picker} from '@tarojs/components';
import './payReserve.scss'

function PayReserve() {
  let [insSel, setInsSel] = useState(['美国', '中国', '巴西', '日本']);
  let [dateSel, setDateSel] = useState('2018-04-22');

  //选择地区的回调
  let onInsChange = (e) => {
    console.log(e)
  }

  //选择体检人
  let choicePerson = () => {
    Taro.navigateTo({
      url: '/pages/YXX/choicePerson/choicePerson'
    })
  }

  //选择时间的回调函数
  let onDateChange = (e)=>{
    console.log(e)
  }

  //选择体检人
  let sure = () => {
    Taro.navigateTo({
      url: '/pages/YXX/finishPay/finishPay'
    })
  }

  return (
    <View className='reserve_container'>
      {/*列表区域*/}
      <View className='list'>
        <View className='list_detail'>
          <View>
            <Text>老年人套餐啥啥啥的(女)</Text>
          </View>
          <View className='count'>
            <Text>￥980</Text>
            <Text className='at-icon at-icon-chevron-right'/>
          </View>
        </View>
        <View className='list_detail'>
          <View>
            <Text>老年人套餐啥啥啥的(女)</Text>
          </View>
          <View className='count'>
            <Text>￥980</Text>
            <Text className='at-icon at-icon-chevron-right'/>
          </View>
        </View>
        <View className='list_detail'>
          <View className='red'>
            <Text>合计</Text>
          </View>
          <View className='count red'>
            <Text>￥9800000</Text>
            <Text className='at-icon at-icon-chevron-right'/>
          </View>
        </View>

      </View>
      {/*选择部分区域*/}
      <View className='person_detail'>
        <View className='list'>
          <Picker mode='selector' range={insSel} onChange={onInsChange}>
            <View className='list_detail'>
              <View>
                <Text>体检机构</Text>
              </View>
              <View className='count address'>
                <Text>【慈铭】广州体育中心体检中心</Text>
                <Text className='at-icon at-icon-chevron-right'/>
              </View>
            </View>
          </Picker>
        </View>
        <View className='list'>
          <View className='list_detail' onClick={choicePerson}>
            <View>
              <Text>体检人</Text>
            </View>
            <View className='count'>
              <Text>未选择</Text>
              <Text className='at-icon at-icon-chevron-right'/>
            </View>
          </View>
        </View>
        <View className='list'>
          <Picker mode='date' range={dateSel} onChange={onDateChange}>
            <View className='list_detail'>
              <View>
                <Text>体检日期</Text>
              </View>
              <View className='count'>
                <Text>未选择</Text>
                <Text className='at-icon at-icon-chevron-right'/>
              </View>
            </View>
          </Picker>
        </View>
      </View>
      {/*按钮*/}
      <View className='sure_btn' onClick={sure}>
        <View>
          <Text>立即预定</Text>
        </View>
      </View>
    </View>
  )
}

export default PayReserve
